feat(KFLUXUI-1008): add version details page#715
feat(KFLUXUI-1008): add version details page#715marcin-michal wants to merge 15 commits intokonflux-ci:mainfrom
Conversation
Assisted-by: Cursor
Assisted-by: Cursor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
Note
|
| Cohort / File(s) | Summary |
|---|---|
Details view & routing src/components/ComponentVersion/ComponentVersionDetailsView.tsx, src/components/ComponentVersion/index.ts, src/routes/page-routes/component-version.tsx, src/routes/index.tsx |
New feature-flag‑gated details layout exported and re‑exported, RBAC loader (componentVersionDetailsViewLoader) for Component resources, and route entries wired into router children. |
Details tab & util src/components/ComponentVersion/tabs/ComponentVersionDetailsTab.tsx, src/utils/version-utils.ts, src/utils/__tests__/version-utils.spec.ts |
New tab rendering version metadata (name, repo link/branch/tag, pipeline), uses getComponentVersion util to resolve versions; unit tests added for version lookup. |
Latest build UI & hook change src/components/LatestBuild/LatestBuildSection.tsx, src/hooks/useLatestPushBuildPipeline.ts |
New LatestBuildSection component (memoized) that queries latest PipelineRun and renders commit and run info; hook signature extended to accept optional version parameter (no active behavior change). |
Tests for views/tabs/latest build src/components/ComponentVersion/__tests__/ComponentVersionDetailsView.spec.tsx, src/components/ComponentVersion/tabs/__tests__/ComponentVersionDetailsTab.spec.tsx, src/components/LatestBuild/__tests__/LatestBuildSection.spec.tsx |
Comprehensive unit tests covering loading, error, 404, feature-flag fallback, tab UI, and LatestBuild behaviors with mocked hooks and data. |
Routing integration src/routes/page-routes/component-version.tsx, src/routes/index.tsx |
Adds component-version route module and integrates its routes into main router children. |
Sequence Diagram(s)
sequenceDiagram
participant Router as Router
participant Loader as RBAC Loader
participant K8s as Kubernetes API
participant View as ComponentVersionDetailsView
participant Tab as ComponentVersionDetailsTab
participant LatestHook as useLatestBuildPipelineRunForComponentV2
participant CommitSvc as Commit utils
rect rgba(63,81,181,0.5)
Router->>Loader: route match (component, workspace)
Loader->>K8s: k8sQueryGetResource(ComponentModel.get)
K8s-->>Loader: Component resource (or error)
Loader-->>View: provide component / error
end
rect rgba(0,150,136,0.5)
View->>View: feature-flag check (components-page)
View->>Tab: render selected tab (Details)
Tab->>LatestHook: request latest build for component + version
LatestHook->>K8s: query PipelineRuns (selector/filter)
K8s-->>LatestHook: PipelineRun(s)
LatestHook->>CommitSvc: getCommitsFromPLRs
CommitSvc-->>LatestHook: commits[]
LatestHook-->>Tab: pipelineRun + commits
Tab-->>View: render commit, status, links
end
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~50 minutes
Possibly related PRs
- feat(FeatureFlag): enhance feature flags implementation #370 — shares feature-flag UI/indicator and route/loader feature-flag utilities used here.
- feat(KFLUXUI-1007): add versions tab to component page #714 — related changes to ComponentVersion routes/components in the same feature area.
- feat(KFLUXUI-690): Adds a feature flag and new Components page #577 — introduces/extends the "components-page" feature flag and routing surface gated by this PR.
Suggested labels
ok-to-test
Suggested reviewers
- rrosatti
- sahil143
- JoaoPedroPP
- testcara
- abhinandan13jan
Poem
A view for versions takes its stand,
Routes and loaders close at hand.
Commits and runs in tidy rows,
Flags that gate what UI shows.
Tests hum softly as it grows.
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title 'feat(KFLUXUI-1008): add version details page' clearly and accurately summarizes the main feature addition: a new version details page for components. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
src/components/ComponentVersion/ComponentVersionDetailsView.tsx
Outdated
Show resolved
Hide resolved
| <DescriptionListGroup> | ||
| <DescriptionListTerm>Latest build pipeline run</DescriptionListTerm> | ||
| <DescriptionListDescription data-test="latest-build-pipelinerun"> | ||
| {pipelineRun.metadata?.name ?? '-'} |
There was a problem hiding this comment.
I left it as a text for now, as there is no updated pipeline run routes/components yet. Felt like it would be more fitting to update it in that PR.
Also I'm not sure what do you mean by show the status? The component details page shows the latest successful build pipeline.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
src/components/ComponentVersion/index.ts (1)
1-4: Use configured path aliases for imports in this new module.Please switch these new relative imports to the repository aliases to match import restrictions and keep layering consistent.
♻️ Proposed refactor
-import { k8sQueryGetResource } from '../../k8s'; -import { ComponentModel } from '../../models'; -import { RouterParams } from '../../routes/utils'; -import { createLoaderWithAccessCheck } from '../../utils/rbac'; +import { k8sQueryGetResource } from '~/k8s'; +import { ComponentModel } from '~/models'; +import { RouterParams } from '~/routes/utils'; +import { createLoaderWithAccessCheck } from '~/utils/rbac';As per coding guidelines: "Use absolute imports with configured path aliases:
~/components,~/types,~/k8s,~/utils,~/models,@routes."🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ComponentVersion/index.ts` around lines 1 - 4, Update the four relative imports at the top of this module to use the project's configured path aliases: replace '../../k8s' with '~/k8s' for k8sQueryGetResource, '../../models' with '~/models' for ComponentModel, '../../routes/utils' with '@routes/utils' (or '@routes' variant) for RouterParams, and '../../utils/rbac' with '~/utils/rbac' for createLoaderWithAccessCheck so the module uses the absolute alias imports required by the coding guidelines.src/components/ComponentVersion/ComponentVersionDetailsView.tsx (1)
20-20: Use absolute import path for DetailsPage.The import should use the configured path alias for consistency with the rest of the imports in this file.
♻️ Proposed fix
-import { DetailsPage } from '../DetailsPage'; +import { DetailsPage } from '~/components/DetailsPage';As per coding guidelines: "Use absolute imports with configured path aliases."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ComponentVersion/ComponentVersionDetailsView.tsx` at line 20, The import for DetailsPage in ComponentVersionDetailsView uses a relative path; update the import to use the project's configured absolute path/alias (e.g., import DetailsPage from the alias that resolves to the DetailsPage module) so that the DetailsPage import follows the codebase's absolute import convention and matches other imports in this file.src/components/ComponentVersion/tabs/ComponentVersionDetailsTab.tsx (2)
49-81: Remove unnecessary fragment wrapper.The fragment wrapper (
<>...</>) is unnecessary since there's only a single child element (DetailsSection).♻️ Proposed fix
- return ( - <> - <DetailsSection title="Version details"> + return ( + <DetailsSection title="Version details"> <DescriptionList> ... </DescriptionList> - </DetailsSection> - </> + </DetailsSection> );🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ComponentVersion/tabs/ComponentVersionDetailsTab.tsx` around lines 49 - 81, The JSX return in ComponentVersionDetailsTab wraps the lone <DetailsSection> in an unnecessary fragment; remove the fragment wrapper and return the <DetailsSection> element directly so the component returns a single root element. Update the return expression that currently wraps <DetailsSection>...</> to just <DetailsSection>...</DetailsSection>, leaving inner children (DescriptionList, DescriptionListGroup, LatestBuildSection, etc.) untouched.
18-18: Use absolute import path for DetailsSection.The import should use the configured path alias for consistency.
♻️ Proposed fix
-import { DetailsSection } from '../../DetailsPage'; +import { DetailsSection } from '~/components/DetailsPage';As per coding guidelines: "Use absolute imports with configured path aliases."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ComponentVersion/tabs/ComponentVersionDetailsTab.tsx` at line 18, Replace the relative import of DetailsSection with the project's configured path alias: update the import statement that currently imports DetailsSection from '../../DetailsPage' in ComponentVersionDetailsTab.tsx to use the absolute alias used across the repo (e.g., the configured alias for the DetailsPage module) so DetailsSection is imported via the project's path-alias instead of a relative path.src/components/ComponentVersion/__tests__/ComponentVersionDetailsView.spec.tsx (1)
72-83: Consider moving namespace mock inside beforeEach for better test isolation.The
mockUseNamespaceHook('test-ns')call at line 73 is outsidebeforeEach, which may work but could lead to unexpected behavior if tests modify namespace state. Moving it insidebeforeEachensures consistent setup for each test.♻️ Suggested improvement
describe('ComponentVersionDetailsView', () => { - mockUseNamespaceHook('test-ns'); - beforeEach(() => { + mockUseNamespaceHook('test-ns'); useParamsMock.mockReturnValue({🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ComponentVersion/__tests__/ComponentVersionDetailsView.spec.tsx` around lines 72 - 83, Move the call to mockUseNamespaceHook('test-ns') into the beforeEach block to ensure namespace state is reset for every test; update the beforeEach that currently sets useParamsMock, useComponentMock, mockUseIsOnFeatureFlag, and mockUseFeatureFlags so it also calls mockUseNamespaceHook('test-ns') at the top (or call a reset/cleanup helper prior to setting the other mocks) to guarantee consistent isolation between tests.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/LatestBuild/LatestBuildSection.tsx`:
- Around line 2-9: In LatestBuildSection, replace the raw <div> layout wrappers
used around the loading Spinner (and the other raw divs noted around lines
39–42) with a PatternFly layout component such as Bullseye (import Bullseye from
'@patternfly/react-core') so the Spinner and any loading message/Alert are
centered and use PF layout primitives; update the JSX in the loading branch to
use <Bullseye><Spinner ... /></Bullseye> (and convert the other raw wrapper
<div> instances to appropriate PF layout components like Bullseye or Stack as
needed) and add the Bullseye import to the existing import list.
In `@src/routes/page-routes/component-version.tsx`:
- Around line 1-7: Replace the relative imports in this file with the project's
path aliases: change imports of ComponentVersionDetailsViewLayout and
componentVersionDetailsViewLoader from '../../components/ComponentVersion' to
'~/components/ComponentVersion', change ComponentVersionDetailsTab from
'../../components/ComponentVersion/tabs/ComponentVersionDetailsTab' to
'~/components/ComponentVersion/tabs/ComponentVersionDetailsTab', change
COMPONENT_VERSION_DETAILS_PATH from '../paths' to '@routes/paths', and change
RouteErrorBoundry from '../RouteErrorBoundary' to '@routes/RouteErrorBoundary'
so the file consistently uses the configured aliases.
---
Nitpick comments:
In
`@src/components/ComponentVersion/__tests__/ComponentVersionDetailsView.spec.tsx`:
- Around line 72-83: Move the call to mockUseNamespaceHook('test-ns') into the
beforeEach block to ensure namespace state is reset for every test; update the
beforeEach that currently sets useParamsMock, useComponentMock,
mockUseIsOnFeatureFlag, and mockUseFeatureFlags so it also calls
mockUseNamespaceHook('test-ns') at the top (or call a reset/cleanup helper prior
to setting the other mocks) to guarantee consistent isolation between tests.
In `@src/components/ComponentVersion/ComponentVersionDetailsView.tsx`:
- Line 20: The import for DetailsPage in ComponentVersionDetailsView uses a
relative path; update the import to use the project's configured absolute
path/alias (e.g., import DetailsPage from the alias that resolves to the
DetailsPage module) so that the DetailsPage import follows the codebase's
absolute import convention and matches other imports in this file.
In `@src/components/ComponentVersion/index.ts`:
- Around line 1-4: Update the four relative imports at the top of this module to
use the project's configured path aliases: replace '../../k8s' with '~/k8s' for
k8sQueryGetResource, '../../models' with '~/models' for ComponentModel,
'../../routes/utils' with '@routes/utils' (or '@routes' variant) for
RouterParams, and '../../utils/rbac' with '~/utils/rbac' for
createLoaderWithAccessCheck so the module uses the absolute alias imports
required by the coding guidelines.
In `@src/components/ComponentVersion/tabs/ComponentVersionDetailsTab.tsx`:
- Around line 49-81: The JSX return in ComponentVersionDetailsTab wraps the lone
<DetailsSection> in an unnecessary fragment; remove the fragment wrapper and
return the <DetailsSection> element directly so the component returns a single
root element. Update the return expression that currently wraps
<DetailsSection>...</> to just <DetailsSection>...</DetailsSection>, leaving
inner children (DescriptionList, DescriptionListGroup, LatestBuildSection, etc.)
untouched.
- Line 18: Replace the relative import of DetailsSection with the project's
configured path alias: update the import statement that currently imports
DetailsSection from '../../DetailsPage' in ComponentVersionDetailsTab.tsx to use
the absolute alias used across the repo (e.g., the configured alias for the
DetailsPage module) so DetailsSection is imported via the project's path-alias
instead of a relative path.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: e2336d34-09b9-46e3-a299-a52df48a0b84
📒 Files selected for processing (14)
src/components/ComponentVersion/ComponentVersionDetailsView.tsxsrc/components/ComponentVersion/__tests__/ComponentVersionDetailsView.spec.tsxsrc/components/ComponentVersion/index.tssrc/components/ComponentVersion/tabs/ComponentVersionDetailsTab.tsxsrc/components/ComponentVersion/tabs/__tests__/ComponentVersionDetailsTab.spec.tsxsrc/components/LatestBuild/LatestBuildSection.tsxsrc/components/LatestBuild/__tests__/LatestBuildSection.spec.tsxsrc/hooks/useLatestPushBuildPipeline.tssrc/routes/index.tsxsrc/routes/page-routes/component-version.tsxsrc/routes/paths.tssrc/routes/utils.tssrc/utils/__tests__/version-utils.spec.tssrc/utils/version-utils.ts
Assisted-by: Cursor
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #715 +/- ##
==========================================
+ Coverage 86.37% 87.14% +0.77%
==========================================
Files 776 782 +6
Lines 59373 59723 +350
Branches 6138 7116 +978
==========================================
+ Hits 51283 52048 +765
+ Misses 7991 7456 -535
- Partials 99 219 +120
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 109 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/LatestBuild/__tests__/LatestBuildSection.spec.tsx (1)
9-15: Use the typed mock helper instead ofas jest.Mockhere.These casts erase the hook/utility signatures, so the suite can return the wrong tuple or argument shape without TypeScript catching it.
createJestMockFunctionkeeps the mocks aligned with the real APIs.Based on learnings: use
createJestMockFunctionfrom~/unit-test-utils/commonfor type-safe mock functions with specific signatures.Also applies to: 25-26
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/LatestBuild/__tests__/LatestBuildSection.spec.tsx` around lines 9 - 15, Replace the untyped jest.fn mocks for the hook and utility with the typed helper: import and use createJestMockFunction from '~/unit-test-utils/common' to create mocks for useLatestBuildPipelineRunForComponentV2 and getCommitsFromPLRs so their signatures are preserved (replace the jest.mock implementations that return jest.fn() and any spots currently cast with "as jest.Mock" with createJestMockFunction<T>() calls using the real function/type signatures); ensure both the mock definitions shown for useLatestBuildPipelineRunForComponentV2 and getCommitsFromPLRs (and the other occurrences around the file) use the typed helper to keep return tuples/argument shapes type-safe.src/components/LatestBuild/LatestBuildSection.tsx (1)
18-19: Use path aliases for these internal imports.These relative imports bypass the repo’s alias/layering convention and make moves/refactors noisier. Please switch them to
~/components/...imports.As per coding guidelines: "Use absolute imports with configured path aliases:
~/components,~/types,~/k8s,~/utils,~/models,@routes"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/LatestBuild/LatestBuildSection.tsx` around lines 18 - 19, The file LatestBuildSection.tsx uses relative imports for internal components (CommitLabel and StatusIconWithTextLabel); replace the relative paths with the project's path aliases (e.g., import CommitLabel from '~/components/Commits/commit-label/CommitLabel' and import { StatusIconWithTextLabel } from '~/components/StatusIcon/StatusIcon') so the imports follow the repo convention and layering rules; update the import statements referencing CommitLabel and StatusIconWithTextLabel accordingly and run the TypeScript build to verify alias resolution.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/LatestBuild/LatestBuildSection.tsx`:
- Around line 29-30: The version-scoped lookup in LatestBuildSection uses
useLatestBuildPipelineRunForComponentV2(namespace, component.metadata.name,
version) which makes the hook filter by PipelineRunLabel.COMPONENT_VERSION (not
yet set) and causes false "No build pipeline available" empty state; fix by
removing the version filter for now (call
useLatestBuildPipelineRunForComponentV2(namespace, component.metadata.name) or
pass undefined for version) or, if you prefer to keep the call, detect a missing
PipelineRunLabel.COMPONENT_VERSION and render a temporary "Build data
unavailable for versions yet" message instead of the empty-state alert so users
know this is a known limitation. Ensure changes are made inside
LatestBuildSection and reference useLatestBuildPipelineRunForComponentV2 and the
empty-state render branch to update behavior.
---
Nitpick comments:
In `@src/components/LatestBuild/__tests__/LatestBuildSection.spec.tsx`:
- Around line 9-15: Replace the untyped jest.fn mocks for the hook and utility
with the typed helper: import and use createJestMockFunction from
'~/unit-test-utils/common' to create mocks for
useLatestBuildPipelineRunForComponentV2 and getCommitsFromPLRs so their
signatures are preserved (replace the jest.mock implementations that return
jest.fn() and any spots currently cast with "as jest.Mock" with
createJestMockFunction<T>() calls using the real function/type signatures);
ensure both the mock definitions shown for
useLatestBuildPipelineRunForComponentV2 and getCommitsFromPLRs (and the other
occurrences around the file) use the typed helper to keep return tuples/argument
shapes type-safe.
In `@src/components/LatestBuild/LatestBuildSection.tsx`:
- Around line 18-19: The file LatestBuildSection.tsx uses relative imports for
internal components (CommitLabel and StatusIconWithTextLabel); replace the
relative paths with the project's path aliases (e.g., import CommitLabel from
'~/components/Commits/commit-label/CommitLabel' and import {
StatusIconWithTextLabel } from '~/components/StatusIcon/StatusIcon') so the
imports follow the repo convention and layering rules; update the import
statements referencing CommitLabel and StatusIconWithTextLabel accordingly and
run the TypeScript build to verify alias resolution.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 23bfcd80-52b3-488b-90c9-147eb242c159
📒 Files selected for processing (3)
src/components/LatestBuild/LatestBuildSection.tsxsrc/components/LatestBuild/__tests__/LatestBuildSection.spec.tsxsrc/hooks/useLatestPushBuildPipeline.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/hooks/useLatestPushBuildPipeline.ts
Assisted-by: Cursor
rrosatti
left a comment
There was a problem hiding this comment.
I left a minor comment, but overall code looks good! also tested locally and it's working fine. Nice job :)
| } | ||
|
|
||
| if (!pipelineRun) { | ||
| return <Alert variant="info" isInline title="No build pipeline available" />; |
There was a problem hiding this comment.
nit: shouldn't we maybe show this Alert under the "Latest build pipeline run" section? With this early return, we won't display the "Latest commit" info.
diff --git a/src/components/LatestBuild/LatestBuildSection.tsx b/src/components/LatestBuild/LatestBuildSection.tsx
index c6d39ed2..8173fb40 100644
--- a/src/components/LatestBuild/LatestBuildSection.tsx
+++ b/src/components/LatestBuild/LatestBuildSection.tsx
@@ -46,12 +46,6 @@ const LatestBuildSection: React.FC<LatestBuildSectionProps> = ({ component, vers
);
}
- if (!pipelineRun) {
- return <Alert variant="info" isInline title="No build pipeline available" />;
- }
-
- const status = pipelineRunStatus(pipelineRun);
-
return (
<DescriptionList>
<DescriptionListGroup>
@@ -79,10 +73,14 @@ const LatestBuildSection: React.FC<LatestBuildSectionProps> = ({ component, vers
<DescriptionListGroup>
<DescriptionListTerm>Latest build pipeline run</DescriptionListTerm>
<DescriptionListDescription data-test="latest-build-pipelinerun">
- <Flex direction={{ default: 'row' }}>
- <StatusIconWithTextLabel status={status} />
- {pipelineRun.metadata?.name ?? '-'}
- </Flex>
+ {pipelineRun ? (
+ <Flex direction={{ default: 'row' }}>
+ <StatusIconWithTextLabel status={pipelineRunStatus(pipelineRun)} />
+ {pipelineRun.metadata?.name ?? '-'}
+ </Flex>
+ ) : (
+ <Alert variant="info" isInline title="No build pipeline available" />
+ )}
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>currently:
with the suggested changes:
There was a problem hiding this comment.
I like the change, updated
Assisted-by: Cursor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/LatestBuild/LatestBuildSection.tsx (1)
32-35: Consider simplifying the useMemo expression for readability.The nested ternary with array access is functionally correct but somewhat dense. A more explicit form would improve maintainability.
♻️ Proposed refactor
const commit = React.useMemo( - () => ((pipelineRunLoaded && pipelineRun && getCommitsFromPLRs([pipelineRun], 1)) || [])[0], + () => { + if (!pipelineRunLoaded || !pipelineRun) return undefined; + return getCommitsFromPLRs([pipelineRun], 1)?.[0]; + }, [pipelineRunLoaded, pipelineRun], );🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/LatestBuild/LatestBuildSection.tsx` around lines 32 - 35, The useMemo for commit is hard to read due to a nested ternary/array access; rewrite the React.useMemo callback to explicitly check pipelineRunLoaded and pipelineRun first, call getCommitsFromPLRs([pipelineRun], 1) only when both are truthy, then return the first element (or undefined) — i.e., refactor the current expression that assigns commit to use a clearer if/guard style within the useMemo callback while keeping the same dependency array ([pipelineRunLoaded, pipelineRun]) and using getCommitsFromPLRs to extract the commit.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/LatestBuild/LatestBuildSection.tsx`:
- Around line 32-35: The useMemo for commit is hard to read due to a nested
ternary/array access; rewrite the React.useMemo callback to explicitly check
pipelineRunLoaded and pipelineRun first, call getCommitsFromPLRs([pipelineRun],
1) only when both are truthy, then return the first element (or undefined) —
i.e., refactor the current expression that assigns commit to use a clearer
if/guard style within the useMemo callback while keeping the same dependency
array ([pipelineRunLoaded, pipelineRun]) and using getCommitsFromPLRs to extract
the commit.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9fa85ca8-f7f7-44fd-846f-8c2824f12d04
📒 Files selected for processing (1)
src/components/LatestBuild/LatestBuildSection.tsx
| {pipelineRun ? ( | ||
| <Flex direction={{ default: 'row' }}> | ||
| <StatusIconWithTextLabel status={status} /> | ||
| {pipelineRun.metadata?.name ?? '-'} |
There was a problem hiding this comment.
how about using Link component here to navigate to PLR details page? :)




Fixes
KFLUXUI-1008
Description
Adds the version details page, with version about the version and it's last commit/build pipeline run.
The information about commit and pipeline run is not working right now, as there is no label to identify versions pipeline runs yet.
Builds upon #712 which should be merged first.
Type of change
Screen shots / Gifs for design review
How to test or reproduce?
yarn run create-mock-componentson one of the precreated namespaces in the local cluster.https://localhost:8080/ns/<ns>/components/<component>/versions/<versionREVISION>. Note that the revision should be used in the URL, not the name.Summary by CodeRabbit